<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>演员管理</el-breadcrumb-item>
      <el-breadcrumb-item>演员列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <!-- 搜索表单 -->
    <el-form :inline="true" :model="searchFrom" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input
          v-model="searchFrom.actorName"
          placeholder="请输入演员姓名"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 演员列表 -->
    <el-divider content-position="center">演员列表</el-divider>
    <!-- 演员列表组件复用 -->
    <person-item
      v-for="item in actorList"
      :key="item.id"
      :id="item.id"
      :name="item.actor_name"
      :avatar="item.actor_avatar"
      @deleteSuccess="onDeleteSucess"
    ></person-item>
  </div>
</template>

<script>
//引入封装的axios
import PersonItem from "@/components/PersonItem.vue";
export default {
  components: { PersonItem },
  data() {
    return {
      searchFrom: {
        actorName: "", //绑定演员名字
      },
      actorList: null, //绑定演员列表
    };
  },
  methods: {
    /**
     * 监听PersonItem删除成功事件
     */
    onDeleteSucess() {
      console.log("用户删除了一个Item");
      //重新加载演员列表
      this.loadActorList();
    },

    /**
     * 点击搜索的时候执行
     */
    onSearch() {
      if (!this.searchFrom.actorName.trim()) {
        //填写的时空字符串
        this.loadActorList(); //加载演员列表
      }
      //发送请求 模糊查询演员列表
      let name = this.searchFrom.actorName;
      this.$http.ActorApi.search({ name }).then((res) => {
        console.log("查询成功", res);
        if (res.data.code == 200) {
          this.actorList = res.data.data;
        }
        this.searchFrom.actorName = "";
      });

      //封装了就不用下面这个 用上面的写法
      // this.axios.post("movie-actors/name", `name=${name}`).then((res) => {
      //   console.log("查询成功", res);
      //   if (res.data.code == 200) {
      //     this.actorList = res.data.data;
      //   }
      // });
    },
    /**
     * 加载演员列表
     */
    loadActorList() {
      this.$http.ActorApi.list({ page: 1, pagesize: 100 }).then((res) => {
        console.log("演员加载列表", res);
        if (res.data.code == 200) {
          this.actorList = res.data.data;
        }
      });
      //为了复用 而且好维护  可能一会要修改端口号 这样统一在封装好的aioxs中修改 方便
      // this.axios.get("/movie-actors?page=1&pagesize=100").then((res) => {
      //   console.log("演员加载列表", res);
      //   if (res.data.code == 200) {
      //     this.actorList = res.data.data;
      //   }
      // });
    },
  },
  /**挂在完毕后执行的生命周期 写在mounted 和create都可以 */
  created() {
    this.loadActorList();
  },
};
</script>

<style lang="scss" scoped></style>
